<template>
    <section class="cms-body flex">
        <div class="tree-layout">
            <!--文件夹-->
            <section class="file-tree-items">
                <div class="reflash" @click="refresh">
                    <span class="el-icon-refresh">刷新</span>
                    <div>
                        <a href="javascript:void(0)" @click="settingTpl(false)" title="PC端"><i class="iconfont icon-iconfontdesktop" style="font-size: 20px"></i></a>
                        <a href="javascript:void(0)" @click="settingTpl(true)" title="移动端"><i class="iconfont icon-shouji" style="font-size: 20px;margin-left: 10px"></i></a>
                    </div>
                </div>
                <!--文件树-->
                <el-tree :data="treeInfo" :props="defaultProps" @node-click="handleNodeClick" accordion :highlight-current="true" node-key="id" :default-expanded-keys="[0]"></el-tree>
                <!--文件树-->
            </section>
        </div>
        <!--文件列表-->
        <router-view class="cms-content-right"></router-view>

    </section>
</template>

<script>
import * as fetch from "@/api/interface";
export default {
  data() {
    return {
      treeInfo: [
        {
          name: "模版根目录",
          path: "",
          child: [],
          id: 0
        }
      ],
      defaultProps: {
        children: "child",
        label: "name",
        id: "id"
      },
      root: ""
    };
  },
  methods: {
    getTemplateTree() {
      fetch.getTemplateTree({ root: this.root }).then(res => {
        this.treeInfo = [{
          name: "模版根目录",
          path: res.body.rootPath,
          child: res.body.resources,
          id: 0
        }];
        setTimeout(() => {
          $("#refresh").removeClass("an-circle");
        }, 500);
      });
    },
    refresh() {
      $("#refresh").addClass("an-circle");
      this.getTemplateTree();
    },
    settingTpl(mobile) {
      this.$router.push({
        path: "/templatesetting",
        query: {
          mobile: mobile,
          noceStr: Math.round(Math.random() * 10)
        }
      });
    },
    handleNodeClick(data) {
      //console.log(data);
      let childType = typeof data.child; //判断类型
      $(window).scrollTop(0);
      if (childType == "object") {
        let params = data.path;
        this.$router.push({
          path: "/templatelist",
          query: {
            name: params,
            noceStr: Math.round(Math.random() * 10)
          }
        });
      } else {
        this.$router.push({
          path: "/templateedit",
          query: {
            id: data.path,
            root: data.root,
            type: "edit"
          }
        });
      }
    },
    viewHeight() {
      var he = $(window).height();
      he = parseInt(he - 170);
      $(".js-height").css("minHeight", he + "px");
    }
  },
  mounted() {
    let clientHeight = document.body.clientHeight;
    $(".cms-body").css("minHeight", clientHeight - 110 + "px");
  },
  created: function() {
    this.$router.push({ path: "/templatelist" });
    this.getTemplateTree();
  }
};
</script>

<style scoped lang='scss'>
.bbs-iconfontdesktop {
  top: 0;
  margin-right: 0;
}
</style>
